<template>
	<view class="">
		<!-- 分类页面 -->
		<view v-if="pattern">
			<!-- 使用自定义搜索组件 -->
			<my-search :bgcolor="'#C00000'" @myclick="gotoSearch"></my-search>
			
			<view class="scroll-view-container">
				<!-- 左侧的滑动区域 -->
				<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
					<block v-for="(item, index) in cateList" :key="index">
						<view :class="['left-scroll-view-item', index === active ? 'active' : '']" @click="index !== active ? activeChanged(item, index) : ''">{{ item.name }}</view>
					</block>
				</scroll-view>
				<!-- 右侧的滑动区域 -->
				<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop">
					<view class="cat-lv2" v-for="(item2, index2) in cateLevel2" :key="index2">
						<view class="cat-lv2-title">/ {{item2.name}} /</view>
						<!-- 三级分类 -->
						<view class="cate-lv3-list">
							<view class="cate-lv3-item" v-for="(item3, index3) in item2.children" :key="index3" @click="gotoGoodsList(item3)">
								<image :src="item3.logo"></image>
								<text>{{ item3.name }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		
		<!-- 信息页面 -->
		<view class="information-container" v-else>
			<!-- <button type="default" @click="getImage">上传图片</button> -->
			
			<view class="informatino-top">
				<view class="uploadGoods">
					<navigator class="uploadGoods-button" url="../../subpkg/upload_goods/upload_goods?merchantGoods=0">
						添加商品
					</navigator>
				</view>
				<view class="myGoods-title">
					我的商品
				</view>
			</view>
			
			<view class="information-bottom">
				<view class="myGoods-body">
					<view v-for="(item,index) in indentGoodsList" :key="index">
						<my-indentGoods @indentGoodClick="gotoIndentGood(item)" :indentGood="item"></my-indentGoods>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	
</template>

<script>
	// 导入自己封装的 mixin 模块
	import badgeMix from '@/mixins/tabbar-badge.js'
	
	import { mapState, mapMutations } from 'vuex'
	
	export default { 
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMix],
		
		computed: {
			...mapState(['pattern']),
			...mapState('m_user', ['refreshToken'])
		},
		
		data() {
			return {
				// 窗口可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 
				wh: 0,
				// 分类数据列表
				cateList: [],
				// 二级分类列表
				cateLevel2: [],
				// 当前选中项的索引
				active: 0,
				scrollTop: 0,
				abc: true,
				
				// 判断是否首次访问商户界面数据
				firstVisit: true,
				
				// 获取商户商品列表的信息
				size: 10,
				current: 1,
				// 商品总量
				total: 0,
				
				indentGoodsList: [{
					indentGood_id: 123
				}, {
					indentGood_id: 122
				}, {
					indentGood_id: 133
				}],
			};
		},
		methods: {
			...mapMutations('m_user', ['updateToken', 'updataRefreshToken']),
			
			// 获取一级分类数据的方法
			async getCateList1() {
				// const {data: res} = await uni.$http.get('https://api-hmugo-web.itheima.net/api/public/v1/categories')
				const res = await uni.$http.get('/goods/categoryApi/info/parent')
				console.log(res);
				if(res.data.code !== 200 ) return uni.$showMsg()
				
				this.cateList = res.data.data
				
				console.log(this.cateList);
				
				// 获取二级分类列表数据
				// this.cateLevel2 = res.message[0].children
				this.getCateList2(this.cateList[0].categoryId)
			},
			// 获取二级分类数据的方法
			async getCateList2(parentId) {
				console.log(parentId);
				const res = await uni.$http.get('/goods/categoryApi/info/' + parentId)
				// console.log(res);
				if(res.data.code !== 200 ) return uni.$showMsg()
				
				this.cateLevel2 = res.data.data
				
				console.log(this.cateLevel2);
				let that = this;
				for(let i = 0; i < this.cateLevel2.length;i++){
					this.getCateList3(this.cateLevel2[i])
				}
				console.log(this.cateLevel2[0]);
				console.log(this.cateLevel2[0].children);
				
			},
			// 获取二级分类数据的方法
			async getCateList3(parent) {
				let parentId = parent.categoryId
				const res = await uni.$http.get('/goods/categoryApi/info/' + parentId)
				// console.log(res);
				if(res.data.code !== 200 ) return uni.$showMsg()
				
				// console.log(res.data.data);
				parent.children = []
				
				res.data.data.forEach(s => {
					parent.children.push(s)
				})
				
				this.abc = !this.abc
				
			},
			// 选中项改变的事件处理函数
			activeChanged(item, index) {
				console.log(item);
				this.active = index
				
				// 为二级分类列表重新赋值
				// this.cateLevel2 = this.cateList[index].children
				this.getCateList2(item.categoryId)
				
				// 重置滚动条（这里的 1 的作用是因为，我们不能每一个给 scrollTop 赋同样的值）
				// 初始为 0，当我们触发事件时，赋值为 0，这时是不会触发的，我们将它赋值为与底部距离为 1，就可以，0101，不断变化
				this.scrollTop = this.scrollTop === 0 ? 1 : 0
			},
			
			// 点击三级分类项跳转到商品列表页面
			gotoGoodsList(item3) {
				uni.navigateTo({
					url: '/subpkg/goods_list/goods_list?categoryId=' + item3.categoryId
				})
			},
			
			// 跳转到分包中的搜索页面
			gotoSearch() {
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			},
			
			// 跳转到分包中的商户商品详情页面	
			gotoIndentGood(e) {
				uni.navigateTo({
					url: '/subpkg/upload_goods/upload_goods?merchantGoods=' + JSON.stringify(e),
				})
			},
			
			async getMerchantGoodsList() {
				const {data: res} = await uni.$http.get('/goods/goodApi/getBusinessGetInfo?size='+ this.size +'&current=' + this.current)
				console.log(123456);
				console.log(res);
				if(res.code !== 200 ) return uni.$showMsg()
				
				const data = {
					total: "4",
					data: [
						{
						goodsId: "1587421177964937217",
						gradeId: "1586993961175216130",
						price: 20,
						stock: "1000",
						sales: "500",
						goodsName: "团命后广",
						images: [
							"https://ossmuyuanec.oss-cn-beijing.aliyuncs.com/Storage/Shop/1269/Products/26842/1.png",
							"https://img2.baidu.com/it/u=1044666172,1288208296&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=350"
						],
						description: "生类经科已任例近再就南内还九。离决花信边正术速家江后约先感应最才然。图存走品省众能或许才入界白年开。响立些化单难对算低器形基许。其能三论太再数写风基少回九四好象养。",
						status: "0"
						},
						{
						goodsId: "1587421750588096514",
						gradeId: "1586993961175216130",
						price: 20,
						stock: "1000",
						sales: "500",
						goodsName: "北京绿苹果",
						images: [
							"https://ossmuyuanec.oss-cn-beijing.aliyuncs.com/Storage/Shop/1269/Products/26842/1.png"
						],
						description: "龙具小求交无接适场电料来合思时认号。即文王它力三则研这为听加务器的通。书断权收列府只已去无任产百社第联法。光低能复为书展北边联流党分支连。运习已么易经由政东温或况之又。",
						status: "0"
						},
						{
						goodsId: "1587742117976493712",
						gradeId: "1586993961175216130",
						price: 20,
						stock: "1000",
						sales: "500",
						goodsName: "福建青苹果",
						images: [
							"https://ossmuyuanec.oss-cn-beijing.aliyuncs.com/Storage/Shop/1269/Products/26842/1.png"
						],
						description: "龙具小求交无接适场电料来合思时认号。即文王它力三则研这为听加务器的通。书断权收列府只已去无任产百社第联法。光低能复为书展北边联流党分支连。运习已么易经由政东温或况之又。",
						status: "0"
						},
						{
						goodsId: "1587742117976493721",
						gradeId: "1586993961175216136",
						price: 20,
						stock: "1000",
						sales: "500",
						goodsName: "青苹果",
						images: [
							"https://ossmuyuanec.oss-cn-beijing.aliyuncs.com/Storage/Shop/1269/Products/26842/1.png"
						],
						description: "生类经科已任例近再就南内还九。离决花信边正术速家江后约先感应最才然。图存走品省众能或许才入界白年开。响立些化单难对算低器形基许。其能三论太再数写风基少回九四好象养。",
						status: "0"
						}
					]
				}
				
				// this.indentGoodsList = res.data.data
				// this.total = res.data.total
				
				this.indentGoodsList = data.data
				this.total = data.total
				
				console.log(this.indentGoodsList);
				
			},
			
			// 刷新 token
			async getRefreshToken() {
				// 准备参数
				const query = {
					scope: 'server',
					refresh_token: this.refreshToken 
				}
				
				// 换取 新token
				const { data: res } = await uni.$http.post('/auth/oauth2/token?grant_type=refresh_token'
				, query)
				console.log(999999);
				console.log(res);
				
				if (res.refresh_token) {
					console.log(111);
					this.updateToken(res.access_token)
					this.updataRefreshToken(res.refresh_token)
					return
				}
				console.log(111);
				this.updateToken('')
				return uni.$showMsg('请重新登录')
			}
		},
		onLoad() {
			this.getRefreshToken()
			
			const that = this
			var timer = setInterval(function () { //开启定时器，下面就是执行的方法，在窗体加载1S后执行下面的方法
				// 调用方法获取分类数据
				that.getCateList1()
				// 获取当前系统的信息
				const sysInfo = uni.getSystemInfoSync()
				// 为 wh 窗口可用高度动态赋值 - 自定义的search组件高度
				that.wh = sysInfo.windowHeight - 48
				
			    clearTimeout(timer); //关闭定时器。               
			}, 1000);//这里的1000代表1秒之后执行方法
		},
		onShow() {
			if (this.pattern) {
				uni.setNavigationBarTitle({ title: '分类' })
			} else {
				uni.setNavigationBarTitle({ title: '信息' })
			}
		},
		onShow() {
			if (!this.pattern && this.firstVisit) {
				// 调用方法获取商户商品列表数据
				this.getMerchantGoodsList()
				
				this.firstVisit = false
			}
		}
	}
</script>

<style lang="scss">
	.scroll-view-container {
		display: flex;
		
		.left-scroll-view {
			width: 120px;
			.left-scroll-view-item {
				height: 60px;
				background-color: #f7f7f7;
				line-height: 60px;
				text-align: center;
				font-size: 26rpx;
				
			}
			
			& .active {
				position: relative;
				background-color: #ffffff;
				
				&::before {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					left: 0;
					width: 3px;
					height: 30px;
					background-color: #c00000;
					transform: translateY(-50%)
				}
				
			}
		}
		
		.right-scroll-view {
			background-color: #ffffff;
			.cat-lv2 {
				.cat-lv2-title {
					display: block;
					width: 100%;
					height: 50px;
					line-height: 50px;
					text-align: center;
					font-size: 14px;
					font-weight: 700;
				}
			
				.cate-lv3-list {
					display: flex;
					flex-wrap: wrap;
					
					
					.cate-lv3-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 33.33%;
						margin-bottom: 10px;
						
						image {
							width: 60px;
							height: 60px;
						}
						text {
							font-size: 12px
						}
					}
				}
			}
		}
	}
	

	// 商品信息
	.information-container {
		position: relative;
		
		.informatino-top {
			// 设置定位效果为“吸顶”
			position: sticky;
			// 吸顶的“位置”
			top: 0;
			// 提高层级，防止被轮播图覆盖
			z-index: 999;
			
			.uploadGoods {
				display: flex;
				justify-content: center;
				align-items: center;
				
				width: 100%;
				height: 80px;
				
				background-color: rgb(245, 245, 245);
				
				.uploadGoods-button {
					width: 120px;
					height: 60px;
					margin-top: 10px;
					border-radius: 50px;
					background-color: #c00000;
					text-align: center;
					line-height: 60px;
					font-size: 16px;
					color: white;
				}
				
			}
			.myGoods-title {
				padding: 10px;
				font-size: 20px;
				background-color: rgb(245, 245, 245);
			}
		}
		
		
		.information-bottom {
			padding: 0 10px;
			
			
			
		}
	}

</style>
